<template>
  <div class="box">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="商户信息"></el-step>
      <el-step title="银行卡信息"></el-step>
    </el-steps>
    <el-divider content-position="center">当前状态：未提交任何资料</el-divider>
    <div class="form-box">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="input">
        <!-- 商户信息 -->
        <div v-if="active == 1">
          <el-form-item label="注册账号" prop="name">
            <el-input v-model="form.phone" placeholder="请输入注册账号（手机号）" />
          </el-form-item>
          <el-form-item label="营业执照类型" prop="name">
            <el-select v-model="form.wordType" placeholder="请选择营业执照类型" style="width:100%">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户名" prop="name">
            <el-input v-model="form.shopName" placeholder="请输入商户名" />
          </el-form-item>
          <el-form-item label="商户经营名" prop="name">
            <el-input v-model="form.shopWorkName" class="input-radius-right" placeholder="请输入商户经营名">
              <template slot="append">示例</template>
            </el-input>
          </el-form-item>
          <el-form-item label="法人姓名" prop="name">
            <el-input v-model="form.contName" placeholder="请输入法人姓名" />
          </el-form-item>
          <el-form-item label="法人电话" prop="name">
            <el-input v-model="form.contPhone" placeholder="法人电话" />
          </el-form-item>
          <el-form-item label="店铺所在地区" prop="name">
            <el-cascader v-model="form.datPlaceCity" style="width:100%" :options="province" clearable
              :props="option"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="name">
            <el-input v-model="form.address" placeholder="请输入详细地址" />
          </el-form-item>
          <el-form-item label="联系电话" prop="name">
            <el-input v-model="form.shopPhone" class="input-radius-right" placeholder="请输入联系电话">
              <template slot="append">示例</template>
            </el-input>
          </el-form-item>
        </div>
        <!-- 银行卡信息 -->
        <div v-if="active == 2">
          <el-form-item label="账户类型" prop="name">
            <el-select v-model="form.accountType" placeholder="请选择账户类型" style="width:100%">
              <el-option v-for="item in countList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账户名称" prop="name">
            <el-input v-model="form.accountName" placeholder="请输入账户名称" />
          </el-form-item>
          <el-form-item label="银行卡卡号" prop="name">
            <el-input v-model="form.cardNum" placeholder="请输入银行卡卡号" />
          </el-form-item>
          <el-form-item label="开户银行" prop="name">
            <el-input v-model="form.bankDep" placeholder="请输入开户银行" />
          </el-form-item>
          <el-form-item label="开户支行" prop="name">
            <el-input v-model="form.bankOpen" placeholder="请输入开户支行" />
          </el-form-item>
          <el-form-item label="开户所在地区" prop="name">
            <el-cascader v-model="form.bankCity" style="width:100%" :options="province" clearable
              :props="option"></el-cascader>
          </el-form-item>
          <el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <div v-else>
              <i class="el-icon-upload avatar-uploader-icon"></i>
              <div class="upload-txt">上传银行卡正面照</div>
            </div>
          </el-upload>
          <el-checkbox v-model="form.checked">我已阅读<span class="agree" @click="open">《用户协议》</span></el-checkbox>
        </div>
      </el-form>
      <div class="flex-b" style="margin: 20px 0 0;">
        <el-button type="primary" class="btn" size="mini" @click="pre">上一步</el-button>
        <el-button type="primary" class="btn" size="mini" v-if="active == 1" @click="next">下一步</el-button>
        <el-button type="primary" class="btn" size="mini" v-else @click="submit">提交申请</el-button>
      </div>
    </div>
    <!-- 用户协议弹窗 -->
    <el-dialog title="用户协议" :visible.sync="dialogVisible" width="30%">
      <span>用户协议内容</span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getCity, subPay } from "@/api/pet/ebbasic";
export default {
  name: "pay",
  data() {
    return {
      active: 1,
      form: {
        checked: false
      },
      rules: {},
      typeList: [
        {
          label: '个体工商户（含小微商户）',
          value: 1
        },
        {
          label: '企业',
          value: 2
        }
      ],
      countList: [
        {
          label: '个人账号',
          value: 1
        },
        {
          label: '对公账号',
          value: 2
        }
      ],
      dialogVisible: false,
      province: [],
      option: {
        value: 'name',
        label: 'name',
        children: 'child'
      },
      imageUrl: '',
      action: process.env.VUE_APP_BASE_API + '/pet/upload/comFile',
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    };
  },
  created() {
    this.getCity()//获取省市
  },
  methods: {
    //获取省市
    getCity() {
      getCity().then(res => {
        if (res.code == 200) {
          this.province = res.data
        }
      })
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.url;
      this.form.bankUrl = res.url
    },
    //上一步
    pre() {
      if (this.active-- < 2) this.active = 1;
    },
    //下一步
    next() {
      if (this.active++ > 1) this.active = 2;
    },
    //用户协议
    open() {
      this.dialogVisible = true
    },
    //提交申请
    submit() {
      if (this.form.checked == false) {
        this.$message({
          message: '请阅读并勾选用户协议',
          type: 'warning'
        });
      } else {
        this.form.datPlaceCity = this.form.datPlaceCity.join("-")
        this.form.bankCity = this.form.bankCity.join("-")
        subPay(this.form).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '提交成功！',
              type: 'success'
            });
            this.active = 1
            this.form = {
              checked: false
            }
          }
        })
      }
    }
  }
};
</script>

<style scoped lang="scss">
.form-box {
  width: 40%;
  margin: 0 auto;

  .agree {
    color: rgb(53, 133, 209);
  }

  .agree:hover {
    cursor: pointer;
  }
  .upload-txt{
    padding: 0 5px;
    position: relative;
    top: -20px;
  }
}
</style>

